<template>
  <div class="pro-table">
    <el-table
      :data="tableData"
      style="padding: 0; width: 100%; color: #000"
      ref="multipleTableRef"
    >
      <el-table-column
        v-for="col in columns"
        :key="col.key || col.prop"
        v-bind="col"
      >
        <template v-if="col.slot" #default="scope">
          <slot :name="col.slot" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      :page-sizes="10"
      v-bind="pagination"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { getMaterialInfo } from '@/api/getapi'
type PropTypes = {
  dataSource?: any[] //表格数据远
  columns: any[] //表格列定义
  pagination?: any //分页设置
  requestApi?: () => Promise<any> // 表格数据网络请求 API 方法
}

//组件属性
const props = withDefaults(defineProps<PropTypes>(), {
  pagination: {
    background: true,
    layout: 'prev, pager, next, jumper, ->, total',
    total: 10,
  },
})

//表格数据
const tableData = ref<any>()
//总数量
const total = ref<number>(0)
//监视属性中的 dataSource，如果有传递或修改，则将表格数据置为 dataSource 属性值
watch(
  () => props.dataSource,
  (val: any) => {
    console.log('datasource:', val)
    if (val) {
      tableData.value = val
    }
  },
  // {
  //   immediate: true,
  // },
)
console.log(tableData)
// 根据属性中传递的网络请求 API 查询表格数据
// const fetchData = async () => {
//   if (props.requestApi) {
//     const result: any = await props.requestApi()
//     tableData.value = result.list
//     total.value = result.total
//   }
// }

// fetchData()
const fetchData = async (params: any) => {
  const resule: any = await getMaterialInfo(params)
  total.value = resule.length
}
fetchData()
/**
 * 翻页
 */
const handleCurrentChange = (page: number) => {
  fetchData({ page })
}
</script>

<style scoped lang="less">
.el-pagination {
  position: fixed;
  top: 95%;
  left: 40%;
}
</style>
